<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
const localUrl = proxy.$localurl

const props = defineProps({
  images: {
    type: Array,
    default: () => [],
    required: true,
  },
  autoplay: {
    type: Boolean,
    default: true,
  },
  interval: {
    type: Number,
    default: 3000,
  },
})

// 轮播逻辑
const currentIndex = ref(0)
const caroRef = ref(null)
const containerWidth = ref(0)
let autoplayTimer = null

// 动态获取容器宽度
const updateContainerWidth = () => {
  if (caroRef.value) {
    containerWidth.value = caroRef.value.clientWidth
  }
}

// 轨道平移样式
const trackStyle = computed(() => ({
  transform: `translateX(-${currentIndex.value * 100}%)`,
  transition: 'transform 0.5s ease',
}))

// 图片预览列表
const srclist = computed(() => props.images.map((item) => localUrl + item.url))

// 切换卡片
const switchCard = (step) => {
  const newIndex = currentIndex.value + step
  if (newIndex >= 0 && newIndex < props.images.length) {
    currentIndex.value = newIndex
  }
}

// 跳转到指定卡片
const goToSlide = (index) => {
  currentIndex.value = index
}

// 自动轮播控制
const startAutoplay = () => {
  if (props.autoplay && props.images.length > 1) {
    autoplayTimer = setInterval(() => {
      switchCard(1)
      // 循环检测
      if (currentIndex.value >= props.images.length - 1) {
        currentIndex.value = 0
      }
    }, props.interval)
  }
}

const stopAutoplay = () => {
  if (autoplayTimer) {
    clearInterval(autoplayTimer)
    autoplayTimer = null
  }
}

// 生命周期
onMounted(() => {
  updateContainerWidth()
  window.addEventListener('resize', updateContainerWidth)
  startAutoplay()
})

onUnmounted(() => {
  window.removeEventListener('resize', updateContainerWidth)
  stopAutoplay()
})
</script>

<template>
  <div class="banner-container">
    <div
      class="carousel-container"
      ref="caroRef"
      @mouseenter="stopAutoplay"
      @mouseleave="startAutoplay"
    >
      <div class="cards-wrapper">
        <div class="cards-track" :style="trackStyle">
          <div v-for="(card, index) in images" :key="index" class="card-item">
            <div class="card-content">
              <el-image
                preview-teleported
                :src="localUrl + card.url"
                :preview-src-list="srclist"
                :initial-index="index"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                show-progress
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 导航箭头 -->
      <span
        class="arrow prev"
        @click="switchCard(-1)"
        :style="{ visibility: images.length > 1 ? 'visible' : 'hidden' }"
      >
        <!-- <img src="@/assets/leftArrow.png" alt="Previous" /> -->
      </span>
      <span
        class="arrow next"
        @click="switchCard(1)"
        :style="{ visibility: images.length > 1 ? 'visible' : 'hidden' }"
      >
        <!-- <img src="@/assets/rightArrow.png" alt="Next" /> -->
      </span>

      <!-- 指示器 -->
      <div class="indicators" v-if="images.length > 0">
        <span
          v-for="(_, index) in images.length"
          :key="index"
          :class="{ active: currentIndex === index }"
          @click="goToSlide(index)"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.banner-container {
  width: 100%;
  height: 100%;
  background: rgba(10, 45, 97);

  .carousel-container {
    position: relative;
    height: 100%;
    width: 100%;

    .cards-wrapper {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 4px;
    }

    .cards-track {
      display: flex;
      height: 100%;
      width: 100%;
    }

    .card-item {
      flex: 0 0 100%;
      min-width: 100%;
      height: 100%;
      position: relative;

      .card-content {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 35px;
      }
    }

    /* 导航箭头 */
    .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      z-index: 2;
      width: 30px;
      height: 30px;
      opacity: 0.7;
      transition: opacity 0.3s;

      &:hover {
        opacity: 1;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }
    .prev {
    }
    .next {
      right: 0px;
    }

    /* 指示器 */
    .indicators {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 15px;
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);

      span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        transition: all 0.3s;

        &.active {
          background: var(--el-color-primary);
          transform: scale(1.2);
        }

        &:hover {
          background: var(--el-color-primary-light-3);
        }
      }
    }
  }
}
</style>
